<template>
	<view class="movable">
		<view class="title" @tap='show =true'>
			<text>图片类型：{{title}}</text>
			<u-icon name="arrow-down" style="margin-left: 10rpx;"></u-icon>
		</view>
		<movable-area class="move-area" :style="{'height': barHeight}">
			<movable-view direction="all" :style="{'height':height,'width':width}" :out-of-bounds='false' class="move-view"
			 :scale="true">
				<view class="container" :style="{'transform': scale}">
					<image id="img" :src="src"></image>
				</view>
			</movable-view>
		</movable-area>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '花嫁',
				show: false,
				list: [{
						value: '../../../../static/img/movable/3.jpg',
						label: '花嫁',
						id: 1
					}, {
						value: '../../../../static/img/movable/2.jpg',
						label: 'switch少女',
						id: 2
					},
					{
						value: '../../../../static/img/movable/5.jpg',
						label: '凌晨',
						id: 3
					}, {
						value: '../../../../static/img/movable/1.jpg',
						label: '圣诞雪夜',
						id: 4
					},
					{
						value: '../../../../static/img/movable/4.jpg',
						label: '卧室睡衣',
						id: 5
					}
				],
				barHeight: 'calc(100vh - 60rpx)',
				width: '100%',
				height: '30%',
				src: '../../../../static/img/movable/3.jpg',
				scale: 'scale(1)'
			};
		},
		onResize() {
			const _this = this
			this.$nextTick(() => {
				uni.getSystemInfo({
					success: function(res) {
						let num = res.windowWidth / 1920
						_this.scale = `scale(${num})`
					}
				});
				_this.$nextTick(function() {
					_this.changeWidth()
				})
			})
		},
		methods: {
			changeWidth() {
				const _this = this
				const query = uni.createSelectorQuery().in(this);
				query.select('.container').boundingClientRect(data => {
					_this.height = data.height + 'px'
					_this.width = data.width + 'px'
				}).exec();
			},
			confirm(e) {
				// 注：这个地方的confirm方法与uview官网返回的参数不同，本人对源码进行过更改，详情可在uselect文件中查看
				this.src = e[0].value
				this.title = e[0].label
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movable {
		.move-area {
			width: 100%;
			overflow: hidden;
		}

		.title {
			height: 60rpx;
			line-height: 60rpx;
		}

		.move-view {
			width: 100%;

			.container {
				width: 1920px;
				height: 1080px;
				z-index: 999;
				transform-origin: 0 0;
				position: relative;

				#img {
					z-index: 998;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

				.icons {
					z-index: 999;
					position: absolute;
				}
			}
		}
	}
</style>
